import { UIPanel, UIButton } from './lib/ui.js';

// import { ToolbarMove } from './Toolbar.Move.js';

// 移动
function ToolbarMove(editor) {

    const strings = editor.strings;

    var icon = document.createElement('img');
    icon.title = strings.getKey('toolbar/move');
    icon.src = 'img/move.svg';

    var btn = new UIButton();
    btn.dom.className = 'Button selected';
    btn.dom.appendChild(icon);
    btn.onClick(function () {

        // signals.transformModeChanged.dispatch( 'translate' );
    });

    return btn;
}

// 形状
function ToolbarShape(editor) {
    const strings = editor.strings;

    var icon = document.createElement('img');
    icon.title = strings.getKey('toolbar/shape/rect');
    icon.src = 'img/rect.svg';

    var btn = new UIButton();
    btn.dom.className = 'Button';
    btn.dom.appendChild(icon);
    btn.onClick(function () {

        // signals.transformModeChanged.dispatch( 'translate' );
    });

    return btn;
}

// 画笔
function ToolbarPen(editor) {
    const strings = editor.strings;

    var icon = document.createElement('img');
    icon.title = strings.getKey('toolbar/pen');
    icon.src = 'img/pen.svg';

    var btn = new UIButton();
    btn.dom.className = 'Button';
    btn.dom.appendChild(icon);
    btn.onClick(function () {

        // signals.transformModeChanged.dispatch( 'translate' );
    });

    return btn;
}

// 文本
function ToolbarText(editor) {
    const strings = editor.strings;

    var icon = document.createElement('img');
    icon.title = strings.getKey('toolbar/text');
    icon.src = 'img/text.svg';

    var btn = new UIButton();
    btn.dom.className = 'Button';
    btn.dom.appendChild(icon);
    btn.onClick(function () {

        // signals.transformModeChanged.dispatch( 'translate' );
    });

    return btn;
}

// 抓手
function ToolbarHand(editor) {
    const strings = editor.strings;

    var icon = document.createElement('img');
    icon.title = strings.getKey('toolbar/hand');
    icon.src = 'img/hand.svg';

    var btn = new UIButton();
    btn.dom.className = 'Button';
    btn.dom.appendChild(icon);
    btn.onClick(function () {

        // signals.transformModeChanged.dispatch( 'translate' );
    });

    return btn;
}


function Toolbar(editor) {
    var container = new UIPanel();
    container.setId('toolbar');

    var move = new ToolbarMove(editor);
    var shape = new ToolbarShape(editor);
    var pen = new ToolbarPen(editor);
    var text = new ToolbarText(editor);
    var hand = new ToolbarHand(editor);

    // let list = [move, shape, pen, text, hand];
    let map = { move, shape, pen, text, hand };

    Object.keys(map).forEach(name => {
        let btn = map[name];
        btn.dom.dataset.state = name;
        btn.onClick(function () {
            var s = container.dom.querySelector('.Button.selected');
            if (s) {
                s.classList.remove('selected');
            }
            btn.addClass('selected');
            editor.setState(name);
        });
        container.add(btn);

    });

    editor.onStateChange = function(state) {
        var s = container.dom.querySelector('.Button.selected');
        if (s) {
            s.classList.remove('selected');
        }
        map[state].addClass('selected');     
    }

    this.dom = container.dom;
    // return container;

}

export { Toolbar };
